// 引入工具函数
require('../js/common-js/utils.js')

// 引入当前less
require('../less/ride.less')

// 文档加载完成
document.ready(() => {
  // console.log('骑行');

  // 调用运动顶部导航栏函数,添加到页面顶部
  window.$utils.sportsTopNav('ride')
  // 调用底部导航栏函数,添加到页面底部
  window.$utils.footerNavBar('sports')

  // 获取dom
  let rideGoBtn = document.querySelector('#rideGoBtn')  //go按钮
  let mapa = document.querySelector('#mapa')  //蒙层地图
  let countDownMask = document.querySelector('#countDownMask') //倒计时蒙层
  let countDownNum = document.querySelector('#countDownNum') //倒计时数字
  let motionMask = document.querySelector('#motionMask') //运动中默认蒙层
  let GPSBtn = document.querySelector('#GPSBtn') //运动中蒙层切换成地图,GPS
  let mapMask = document.querySelector('#mapMask') //运动中地图蒙层
  let pauseButton = document.querySelector('#pauseButton') //运动中暂停按钮框
  let pauseBtn = document.querySelector('#pauseBtn') //运动中暂停按钮
  let continueEndBtn = document.querySelector('#continueEndBtn') //运动中继续&结束框
  let continueBtn = document.querySelector('#continueBtn') //运动中继续按钮
  let endBtn = document.querySelector('#endBtn') //运动中结束按钮
  let toBackBtn = document.querySelector('#toBackBtn') //地图模式返回按钮 
  let locationBtn = document.querySelector('#locationBtn') //地图模式定位按钮 
  let locationBox = document.querySelector('#locationBox') //地图模式跑步信息框
  let finishBtn = document.querySelector('#finishBtn') //运动中完成按钮
  let exerciseBox = document.querySelector('#exerciseBox') //运动中运动结束信息框 
  let rideNum = document.querySelector('#rideNum') //累积骑行距离 
  let rideTime = document.querySelector('#rideTime') //骑行用时 
  let rideTimeNum = document.querySelector('#rideTimeNum') //地图模式中的用时 
  let rideAllTime = document.querySelector('#rideAllTime') //完成部分总用时
  let kilNum = document.querySelector('#kilNum') //目前跑步公里数 
  let ridePace = document.querySelector('#ridePace') //配速  
  let rideSpeed = document.querySelector('#rideSpeed') //地图蒙层配速   
  let rideAvgPace = document.querySelector('#rideAvgPace') //地图蒙层结束的平均配速 
  let rideLiData = document.querySelector('#rideLiData') //地图蒙层距离  
  let kiloNum = document.querySelector('#kiloNum') //地图蒙层结束距离 
  let rideCalorie = document.querySelector('#rideCalorie') //默认蒙层千卡   
  let rideConsumeKcal = document.querySelector('#rideConsumeKcal') //地图蒙层结束千卡    
  let sportsDate = document.querySelector('#sportsDate') //地图蒙层结束当前日期


  // 从本地存储获取当前用户id
  let userId = JSON.parse(localStorage.getItem('user')).userId
  console.log(userId);


  let timerId = null
  let timing = 0
  // 创建蒙层中初始化地图实例    
  mapa = new BMap.Map(mapa)
  // 模拟跑起来经纬度发生改变
  let moveNum = 0.001
  // 定义数组，保存每次的经纬度
  let pointArr = []
  // 跑步距离
  let rideKm = 0
  // 千卡
  let kio = 0

  // 页面加载时调用
  initMap()  //初始地图
  getTotalRide()   //累积骑行距离


  // 封装初始化地图
  function initMap() {
    var map = new BMap.Map("map");
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        // console.log(r);
        let lng = r.longitude;//经度
        let lat = r.latitude;//纬度
        var point = new BMap.Point(lng, lat);
        map.centerAndZoom(point, 12);
        //隐藏地图标记
        let baiduFlags = document.querySelectorAll(".anchorBL");
        baiduFlags.forEach(function (v) {
          v.style.display = "none";
        })
      }
      else {
        alert('failed' + this.getStatus());
      }
    });
  }

  // 封装蒙层中的地图
  function getLocation() {
    /*geolocation 地理位置 */
    let geolocation = new BMap.Geolocation()
    /* 获取当前位置 */
    geolocation.getCurrentPosition(function (r) {
      //如果获取当前位置成功了 
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        // console.log(r)
        // 电脑端模拟骑行
        //经度
        let lng = window.parseFloat(r.longitude) + moveNum
        // //纬度
        let lat = window.parseFloat(r.latitude) + moveNum
        moveNum += 0.001
        /* // 手机端
        let lng = window.parseFloat(r.longitude)
        let lat = window.parseFloat(r.latitude) */
        // console.log(moveNum);
        // 存放每次的坐标点
        pointArr.push({ lng: lng, lat: lat })
        // 画线
        if (pointArr.length > 1) {
          let startPoint = pointArr[pointArr.length - 2] //起点
          let curPoint = pointArr[pointArr.length - 1] //当前位置
          let sPoint = pointArr[0] //起点固定

          // 调用画线函数
          drawLine(startPoint, curPoint)

          // 调用距离函数 计算距离
          let distance = window.$utils.calcDistance(sPoint, curPoint)
          rideKm = parseFloat(distance)
          // 把计算的结果渲染到页面
          kilNum.textContent = rideKm.toFixed(2)
          rideLiData.textContent = rideKm.toFixed(2)
          kiloNum.textContent = rideKm.toFixed(2)

          //  计算配速
          let Pace = window.$utils.calcPace(rideKm, timing)
          // 把计算的结果渲染到页面
          ridePace.textContent = Pace
          rideSpeed.textContent = Pace

          // 计算千卡
          kio = window.$utils.calCalorie(rideKm)
          // 把计算的结果渲染到页面
          rideCalorie.textContent = kio
          rideConsumeKcal.textContent = kio
        }
        //根据当前的经度和纬度绘制地图
        // 创建点坐标  
        let point = new BMap.Point(lng, lat);
        // 初始化地图，设置中心点坐标和地图级别
        mapa.centerAndZoom(point, 18);
        // 隐藏地图标识
        let baidulogos = document.querySelectorAll('.anchorBL')
        baidulogos.forEach(function (v) {
          v.style.display = 'none'
        })
      }
      else {
        //如果获取当前位置失败了 
        alert('failed' + this.getStatus());
      }
    });
  }

  // 封装画线的函数
  function drawLine(sPoint, cPoint) {
    var polyline = new BMap.Polyline([
        new BMap.Point(sPoint.lng, sPoint.lat),
        new BMap.Point(cPoint.lng, cPoint.lat)
    ],
        { strokeColor: "red", strokeWeight: 6, strokeOpacity: 0.5 }
    );
    mapa.addOverlay(polyline);
}

  // 封装累积跑步距离
  function getTotalRide() {
    // 发送jajax请求
    axios.get(window.$utils.BASE_URL + '/sports/exerciseData?id=' + userId)
      .then((result) => {
        let res = result.data
        //  console.log(res);
        if (res.status === 0) {
          rideNum.textContent = res.data.ridekm.toFixed(2)
        }
      })
      .catch((error) => {
        console.log(error);
      })
  }

  // 给rideGoBtn，添加事件
  rideGoBtn.addEventListener('click', function () {
    // 定义数组，保存倒计时的值
    let textArr = [3, 2, 1, 'GO']
    // 定义倒计时数字索引
    let index = 0
    // 隐藏GO
    rideGoBtn.style.display = 'none'
    // 显示倒计时蒙层
    countDownMask.style.display = 'block'
    // 显示暂停框
    // pauseButton.style.display = 'block'
    // 页面初始显示倒计时数字
    countDownNum.textContent = textArr[index]
    // 开启计时器
    timerId = window.setInterval(() => {
      // 索引自增
      index++
      // 判断
      if (index === textArr.length) {
        // 清除计时器
        clearInterval(timerId)
        // 显示运动中蒙层
        motionMask.style.display = 'block'
        // 隐藏倒计时蒙层
        countDownMask.style.display = 'none'
        // 调用开始骑行计时器
        startRide()
      } else {
        // 把当前倒计时的值渲染到页面
        countDownNum.textContent = textArr[index]
      }
    }, 1000);
  })

  // 定义骑行计时函数
  function startRide() {
    // 先清除计时器
    window.clearInterval(timerId)
    timerId = window.setInterval(function () {
      timing++
      let time = window.$utils.secondToHMS(timing)
      // 默认蒙层中显示用时
      rideTime.textContent = time
      // 地图模式中显示用时
      rideTimeNum.textContent = time
     // 调用地图蒙层函数
     getLocation()
    }, 1000)
  }

  // 给pauseBtn 暂停按钮 添加事件
  pauseBtn.addEventListener('click', function () {
    // 清除计时器
    window.clearInterval(timerId)
    // 隐藏暂停按钮框
    pauseButton.style.display = 'none'
    // 显示继续&结束按钮框
    continueEndBtn.style.display = 'block'
  })

  // 给continueBtn 继续按钮 添加事件
  continueBtn.addEventListener('click', function () {
    // 计时器继续走
    startRide()
    // 隐藏继续&结束按钮框
    continueEndBtn.style.display = 'none'
    // 显示暂停按钮框
    pauseButton.style.display = 'block'
  })

  // 给GPSBtn GPS按钮 添加事件
  GPSBtn.addEventListener('click', function () {
    // 调用地图模式函数
    getLocation()
    // 把默认蒙层中显示的时间赋给地图模式中的时间
    rideTimeNum.textContent = rideTime.textContent
    // 隐藏默认蒙层
    motionMask.style.display = 'none'
    // 显示地图蒙层
    mapMask.style.display = 'block'
    // 显示返回按钮
    toBackBtn.style.display = 'block'
    // 显示定位按钮
    locationBtn.style.display = 'block'
    // 显示跑步信息框
    locationBox.style.display = 'block'
  })

  // 给toBackBtn 返回按钮 添加事件
  toBackBtn.addEventListener('click', function () {
    // 关闭地图蒙层
    mapMask.style.display = 'none'
    // 显示默认蒙层
    motionMask.style.display = 'block'
    // 隐藏返回按钮
    toBackBtn.style.display = 'none'
    // 隐藏定位按钮
    locationBtn.style.display = 'none'
    // 隐藏跑步信息框
    locationBox.style.display = 'none'
  })

  // 给endBtn 结束按钮 添加事件
  endBtn.addEventListener('click', function () {
    // 调用地图函数
    getLocation()
    // 清除计时器
    window.clearInterval(timerId)
    // 隐藏默认蒙层
    motionMask.style.display = 'none'
    // 隐藏继续&结束框
    continueEndBtn.style.display = 'none'
    // 显示地图蒙层
    mapMask.style.display = 'block'
    // 显示完成按钮
    finishBtn.style.display = 'block'
    // 显示运动结束信息框
    exerciseBox.style.display = 'block'
    // 把默认地图中的时间赋给结束时间
    rideAllTime.textContent = rideTime.textContent
    // 显示当前日期
    sportsDate.textContent = window.$utils.getNowDate('/')
    // 平均速度 = 距离/时间
    rideAvgPace.textContent = (rideKm / timing).toFixed(2)
  })

  // 给finishBtn 完成按钮 添加事件
  finishBtn.addEventListener('click', function () {
    // console.log(111);
        // 发送ajax请求
        axios.post(window.$utils.BASE_URL + "/sports/save",
            {
                id: userId, //当前用户id
                type: 2,//类型
                takeTime: timing,//用时
                miles: rideKm,//跑步距离
                averagerate: (rideKm / timing).toFixed(2),//平均速度
                calorie: kio//卡路里
            })
            .then((result) => {
                let res = result.data
                if (res.status === 0) {
                    //  保存成功
                    window.$utils.showToast('icon-check', '保存成功')
                    window.setTimeout(function () {
                        // 刷新页面
                        window.history.go(0)
                    }, 2000)
                } else if (res.status === 1) {
                    // 保存失败
                    window.$utils.showToast('icon-cuo', '保存失败')
                }
            })
            .catch((error) => {
                console.log(error);
            })
  })
  
})